<template>
  <ph-view>
    <ph-tab>
      <ph-tab-panel title="demo">
        <ph-list title="测试test" flex="0 0 auto">
          <ph-list-item
            >观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。舍利子，色不异空，空不异色，色即是空，空即是色this
            is item 1</ph-list-item
          >
          <ph-list-item
            >观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。舍利子，色不异空，空不异色，色即是空，空即是色this
            is item 1</ph-list-item
          >
          <ph-list-item
            >观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。舍利子，色不异空，空不异色，色即是空，空即是色this
            is item 1</ph-list-item
          >
          <ph-list-item
            >观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。</ph-list-item
          >
          <ph-list-item
            >观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。舍利子，色不异空，空不异色，色即是空，空即是色this
            is item 1</ph-list-item
          >
          <ph-list-item
            >观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。舍利子，色不异空，空不异色，色即是空，空即是色this
            is item 1</ph-list-item
          >
          <ph-list-item
            >观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。舍利子，色不异空，空不异色，色即是空，空即是色this
            is item 1</ph-list-item
          >
        </ph-list>
        <ph-list title="测试test" flex="0 0 auto">
          <ph-list-item
            >观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。舍利子，色不异空，空不异色，色即是空，空即是色this
            is item 1</ph-list-item
          >
          <ph-list-item
            >观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。舍利子，色不异空，空不异色，色即是空，空即是色this
            is item 1</ph-list-item
          >
          <ph-list-item
            >观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。舍利子，色不异空，空不异色，色即是空，空即是色this
            is item 1</ph-list-item
          >
          <ph-list-item
            >观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。</ph-list-item
          >
          <ph-list-item
            >观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。舍利子，色不异空，空不异色，色即是空，空即是色this
            is item 1</ph-list-item
          >
          <ph-list-item
            >观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。舍利子，色不异空，空不异色，色即是空，空即是色this
            is item 1</ph-list-item
          >
          <ph-list-item
            >观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。舍利子，色不异空，空不异色，色即是空，空即是色this
            is item 1</ph-list-item
          >
        </ph-list>
        <ph-list title="测试test" flex="0 0 auto" :footbar="true">
          <ph-list-item>观自在菩萨，行深般若波罗蜜多时</ph-list-item>
          <ph-list-item>观自在菩萨，行深般若波罗蜜多时</ph-list-item>
          <ph-list-item>观自在菩萨，行深般若波罗蜜多时</ph-list-item>
          <ph-list-item>观自在菩萨，行深般若波罗蜜多时</ph-list-item>
          <ph-list-item>观自在菩萨，行深般若波罗蜜多时</ph-list-item>
          <ph-list-item>观自在菩萨，行深般若波罗蜜多时</ph-list-item>
          <ph-list-item>观自在菩萨，行深般若波罗蜜多时</ph-list-item>
          <ph-list-item>观自在菩萨，行深般若波罗蜜多时</ph-list-item>
          <template v-slot:footbar>
            <ph-button :small="true" :ghost="true">你好</ph-button>
            <ph-button :small="true" :ghost="true">你好</ph-button>
            <ph-button :small="true" :ghost="true">你好</ph-button>
          </template>
        </ph-list>
      </ph-tab-panel>
      <ph-tab-panel title="template">
        <ph-pretty lang="html">{{ template }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ baseUsage }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import {
  PhList,
  PhListItem,
  PhButton,
  PhTab,
  PhTabPanel,
  PhView,
} from "@/index";
import * as Data from "../data/list";
export default defineComponent({
  components: { PhList, PhListItem, PhButton, PhTab, PhTabPanel, PhView },
  setup() {
    return { ...Data };
  },
});
</script>
